<%@ include file="/WEB-INF/jsp/_include.jsp" %>

<t:base>
    <jsp:attribute name="header">
		<script type="text/javascript" src="static/competitions/choose_umpires.js"></script>
		<link rel="stylesheet" href="static/competitions/choose_umpires.css">
		<h1 >Choose Umpires</h1>
    </jsp:attribute>

    <jsp:body>
<div id="dateslotwin" class="winsection">
<table>
<tr><td>
    <div id="availlist" class="listviewsection">
        <h2>Umpires Available</h2>
        <div id="availlistview" class="listView"></div>
        <div id="pager1" class="k-pager-wrap"> </div>
    </div>
</td>
<td>
	<input type="button" class="shiftbutton" id="moveRight"	value="=>"><br />
	<input type="button" class="shiftbutton" id="moveLeft" value="<=">
</td>
<td>
    <div id="confirmedlist" class="listviewsection">
        <h2>Confirmed Umpires</h2>
        <div id="confirmlistview" class="listView"></div>
        <div id="pager2" class="k-pager-wrap"> </div>
    </div>
    </td></tr>
    <tr>
    <td colspan="3">
    <input id="save_assignment" type="button" value="Save"/>
    </td>
    </tr>
</table>
</div>
<div id="CompetitionInfo">
	<h2>Competition: <span>${ competition.name }</span></h2>
	<h2>Referee: <span class="text">${competition.refereeName}</span></h2>
	<h2>Location: <span class="text">${competition.location}</span></h2>
	<h2>Period: 
		<span class="text">
			<fmt:formatDate pattern="dd/MM/yyyy" value="${competition.startDate}" /> - <fmt:formatDate pattern="dd/MM/yyyy" value="${competition.endDate}" />
		</span>
	</h2>
</div>
<div id="grid-container">
	 <table id="grid" width=100%>
	    <colgroup>
	        <col class="datecell" />
	        <col class="slotcell" />
	        <col class="slotcell" />
	        <col class="slotcell" />
	    </colgroup>
	    <thead>
	        <tr>
	            <th width=9%>
	                Date
	            </th>
	            <th>
	                Morning
	            </th>
	            <th>
	                Afternoon
	            </th>
	            <th>
	                Evening
	            </th>                        
	        </tr>
	    </thead>
	    <tbody>
	        <tr>
	            <td></td>
	            <td></td>
	            <td></td>
	            <td></td>
	        </tr>
	    </tbody>
	</table>
	
	
	<script id="rowTemplate" type="text/x-kendo-tmpl">
	            <tr>
		            <td class="datecell">
                       #: date #
		            </td>
		            <td class="slotcell">
						<button id="#=date+'_Morning'#" class="undo">Available: 
							#= (morningSession.availUmpire.length) || 0 # 
							/ Confirmed: #= (morningSession.confirmedUmpire.length) #
						</button>
		            </td>
		            <td class="slotcell">
						<button id="#=date+'_Afternoon'#" class="undo">Available: 
							#= (afternoonSession.availUmpire.length) || 0 # 
							/ Confirmed: #= (afternoonSession.confirmedUmpire.length) #
						</button>
		            </td>
		            <td class="slotcell">
						<button id="#=date+'_Evening'#" class="undo">Available: 
							#= (eveningSession.availUmpire.length) || 0 # / Confirmed: #= (eveningSession.confirmedUmpire.length) #
						</button>
		            </td>
	           </tr>
	</script>
</div>

<script type="text/x-kendo-tmpl" id="listtemplate">
        <div class="umpireItem" data-id= "#:key#">
            <h3>#:email#</h3>
			<p>#:name# </p>
        </div>
</script>
<div id='umpire_reply_submission'>
	<input type="text" id="cid" name="id" value="${competition.key}" hidden="true" readonly>
	<input type="text" id="datetable" name="datetable" value="${datetable}" hidden="true" readonly>
	<div><input type="button" class="SubmitBtn" value="Send Email To Confirmed Umpires" onclick="sendEmailConfirmation()"/></div>
</div>
    </jsp:body>
</t:base>


